<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-12-14 10:32:54
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-06-12 09:00:05
 * @FilePath: \cxl-driving-training\src\views\orderManagement\detailed\Index.vue
-->
<template>
    <div class="page-box-detail">
        <titleVue title="报名信息" big="true" />
        <div class="table">
            <el-table
                ref="multipleTableRef"
                :data="tableData"
                style="width: 100%; height: 100%; max-height: 100%"
                :border="true"
                :header-cell-style="{ background: '#f5f7fa' }"
            >
                <el-table-column
                    v-for="(item, index) in tableHeader"
                    :key="index"
                    :label="item.label"
                    :prop="item.prop"
                    align="center"
                    :width="item.prop === 'schoolLogo' ? '120rpx' : 'auto'"
                >
                    <template #default="scope">
                        <img
                            style="width: 80px; height: 80px"
                            v-if="item.prop === 'schoolLogo'"
                            :src="scope.row[item.prop]"
                            class="school-logo"
                            alt=""
                        />
                        <span v-else>{{ scope.row[item.prop] }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <titleVue title="订单信息" big="true" />
        <div class="info">
            <div class="li">商户订单编号：{{ orderInfo.orderNo }}</div>
            <div class="li">下单时间：{{ orderInfo.createTime }}</div>
            <div class="li">支付状态：{{ orderInfo.orderStatus }}</div>
            <div class="li">
                支付金额：<span><i>￥</i>{{ orderInfo.amount }}</span>
            </div>
            <div class="li">支付方式：{{ orderInfo.payType }}</div>
            <div class="li">微信支付订单号：{{ orderInfo.transactionId }}</div>
            <div class="li">购买渠道：{{ orderInfo.payPlatform }}</div>
            <div class="li">姓名：{{ orderInfo.name }}</div>
            <div class="li">手机号码：{{ orderInfo.phone }}</div>
        </div>
        <div class="close-btn">
            <el-button @click="onClose"> 返回</el-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import titleVue from '@/components/title/Index.vue'
import { routerStore } from '@/store/router.store'
import router from '@/router/index'
import { useRoute } from 'vue-router'
import { orderDetailedById } from '@/apis/order'
import { DICT_DATA } from '@/utils/dict-data'

type siteType = {
    siteThreeAddressDetail: string
    siteThreeName: string
    siteTwoAddressDetail: string
    siteTwoName: string
}

type tableType = {
    className: string
    classNumber: string
    city: string
    schoolShortName: string
    schoolLogo: string
    storeName: string
    storeAddress: string
    productName: string
    originalPrice: string
    activePrice: string
}

const tableData = reactive<tableType[]>([])
const tableHeader = reactive([
    { label: '驾校logo', prop: 'schoolLogo' },
    { label: '驾校名称', prop: 'schoolShortName' },
    { label: '班级名称', prop: 'className' },
    { label: '班别编号', prop: 'classNumber' },
    { label: '产品名称', prop: 'productName' },
    { label: '城市', prop: 'city' },
    { label: '门店名称', prop: 'storeName' },
    { label: '门店地址', prop: 'storeAddress' },
    { label: '原价', prop: 'originalPrice' },
    { label: '活动价格', prop: 'activePrice' }
])
const rStore = routerStore()
let orderId = ''
//关闭页面
const onClose = () => {
    rStore.removeHeaderRoute(rStore.selectIndex)
    router.push('/order')
}
const route = useRoute()

const orderInfo = reactive({
    orderNo: '',
    createTime: '',
    orderStatus: '',
    amount: 0, //单位分
    payType: '',
    payPlatform: '',
    name: '',
    phone: '',
    transactionId: ''
})

const getMapValue = (str: string, val: string | number) => {
    const arr: any[] = DICT_DATA.get(str)
    console.log(arr, str, val)
    return arr.find((item: any) => {
        return Number(item.value) === Number(val)
    })
}

onMounted(() => {
    console.log(route)
    orderId = route.query?.id as string
    orderDetailedById(orderId).then(res => {
        if (Number(res.data.code) === 200) {
            orderInfo.orderNo = res.data.result.orderNo
            orderInfo.createTime = res.data.result.createTime
            console.log(getMapValue('payPlatform', res.data.result.payPlatform))
            orderInfo.orderStatus = getMapValue('orderStatus', res.data.result.orderStatus).label
            orderInfo.amount = res.data.result.actualAmount
            orderInfo.payType = getMapValue('payType', res.data.result.payType).label
            orderInfo.payPlatform = getMapValue('payPlatform', res.data.result.payPlatform).label
            orderInfo.name = res.data.result.name
            orderInfo.phone = res.data.result.phone
            orderInfo.transactionId = res.data.result.transactionId

            tableData.length = 0

            tableData.push({
                className: res.data.result.classInfo.className,
                classNumber: res.data.result.classInfo.classNumber,
                city: res.data.result.city,
                schoolShortName: res.data.result.schoolInfo.schoolShortName,
                schoolLogo: res.data.result.schoolInfo.schoolLogo,
                storeName: res.data.result.schoolStoreInfo.name,
                storeAddress: res.data.result.schoolStoreInfo.addressDetail,
                productName: res.data.result.productSnapshot.productName,
                originalPrice: res.data.result.productSnapshot.originalPrice,
                activePrice: res.data.result.productSnapshot.activePrice
            })
        }
    })
})
</script>
<style scoped lang="scss">
.table {
    margin-bottom: 16px;
}
.info {
    display: flex;
    flex-wrap: wrap;
    .li {
        width: 25%;
        margin-top: 16px;
        span {
            color: #f20;
            font-weight: bold;
            font-size: 18px;
            i {
                font-size: 12px;
            }
        }
    }
}

.close-btn {
    display: flex;
    justify-content: center;
    padding: 100px 0 50px 0;
}
.img {
    width: 100%;
    display: block;
}

.addr {
    margin-bottom: 10px;
    h1 {
        font-size: 14px;
        text-align: left;
        i {
            font-weight: bold;
            margin-right: 6px;
        }
    }
    p {
        text-align: left;
        margin-top: 6px;
    }
}

@media only screen and (max-width: 1400px) {
    .info {
        .li {
            width: 33.33%;
        }
    }
}
@media only screen and (max-width: 1000px) {
    .info {
        .li {
            width: 50%;
        }
    }
}
</style>
